<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            padding: 0;
        }
        .header, .content, .footer {
            width: 1200px;
            margin: 0 auto;
        }

        .header {
            height: 200px;
            background-color: red;
        }

        .content div {
            height: 600px;
            background-color: orange;
            margin-top: 10px;
        }

        .footer {
            height: 400px;
            margin-top: 20px;
            background-color: greenyellow;
        }

        .rightnav {
            /* width: 60px; */
            position: fixed;
            right: 0px;
            top: 20%;
            display: flex;
            flex-direction: column;
            box-shadow: 0 0 20px rgb(214, 208, 208);
            border-radius: 20px 0 0 20px;
            opacity: 0;
            transition: all 0.5s;
        }

        .rightnav .item {
            text-align: center;
            height: 70px;
            width: 60px;
            line-height: 70px;
            cursor: pointer;
        }

        .selected {
            font-weight: bold;
            color: brown;
            background-color: aqua;
        }

    </style>
</head>
<body>

    <div class="header">
        头部
    </div>


    <div class="content">
        <div class="part" id="d1">第一层</div>
        <div class="part" id="d2">第二层</div>
        <div class="part" id="d3">第三层</div>
        <div class="part" id="d4">第四层</div>
    </div>

    <div class="footer">底部</div>

    
    <div class="rightnav">
        <div class="item" data-id="1">1</div>
        <div class="item" data-id="2">2</div>
        <div class="item" data-id="3">3</div>
        <div class="item" data-id="4">4</div>
        <div class="item" data-id="0">回顶部</div>
    </div>

<script>
    let totop = document.querySelector(".rightnav .item:last-child")
    let navbar = document.querySelector(".rightnav")

    let partlist = document.querySelectorAll(".part")
    let offsetList = []
    partlist.forEach(function(part) {
        offsetList.push(part.offsetTop)
        // console.log(part.offsetTop)
    })
    offsetList.push(100000)

    console.log(offsetList)


    // console.log(navbar.clientHeight, totop.clientWidth)
    window.addEventListener("scroll", function() {
        let top = document.documentElement.scrollTop
        if (top >= 210) {
            // totop.style.display = "block"
            navbar.style.opacity = 1
        } else {
            // totop.style.display = "none"
            navbar.style.opacity = 0
        }

        let t = 0
        for (let i = 0; i < offsetList.length - 1; i++) {
            if (top >= offsetList[i] && top < offsetList[i + 1]) {
                t = i + 1
            }
        }
        if (t) {
            let sel = document.querySelector(".selected")
            if (sel) {
                sel.classList.remove("selected")
            }
            document.querySelector(`[data-id="${t}"]`).classList.add("selected")
        }
        
    })

    navbar.addEventListener("click", function(e) {
        console.log(e.target)
        let id = e.target.dataset.id
        if (id == 0) {
                window.scrollTo({
                top: 0,
                behavior: "smooth"
            })
        } else {
            let tg = document.querySelector(`#d${id}`)
            let t = tg.offsetTop
            console.log(t)
            console.log(tg)
            window.scrollTo({
                top: t,
                behavior: "smooth"
            })
        }
    })
</script>
</body>
</html>